<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <title>Vue 测试实例 - 菜鸟教程(runoob.com)</title>
    <script src="https://unpkg.com/vue@next"></script>
</head>

<body>
    <div id="app">
        <button @click="counter += 1">增加 1</button>
        <p>这个按钮被点击了 {{ counter }} 次。</p>

        <hr>
        <!-- -on 可以接收一个定义的方法来调用。  -->
        <!-- `greet` 是在下面定义的方法名 -->
        <button @click="greet">点我</button>

        <hr>
        <!-- 除了直接绑定到一个方法，也可以用内联 JavaScript 语句： -->
        <button @click="say('hi')">Say hi</button>
        <button @click="say('what')">Say what</button>

        <hr>
        <!-- 事件处理程序中可以有多个方法，这些方法由逗号运算符分隔： -->
        <!-- 这两个 one() 和 two() 将执行按钮点击事件 -->
        <button @click="one($event), two($event)">
            点我
        </button>
    </div>

    <script>
        const app = {
            data() {
                return {
                    counter: 0,
                    name: 'Runoob'
                }
            },
            methods: {
                greet(event) {
                    // `methods` 内部的 `this` 指向当前活动实例
                    alert('Hello ' + this.name + '!')
                    // `event` 是原生 DOM event
                    if (event) {
                        alert(event.target.tagName)
                    }
                },
                say(message) {
                    alert(message)
                },
                one(event) {
                    alert("第一个事件处理器逻辑..." + event.target.tagName)
                },
                two(event) {
                    alert("第二个事件处理器逻辑..." + event.target.tagName)
                }
            }
        }

        Vue.createApp(app).mount('#app')
    </script>
</body>

</html>